<template>
    <div class="activity-coupon-item" :style="`${borderThemeColor(.3)}`">
        <div class="coupon-item-content" :style="`${fontColor}`">
            <div class="coupon-label" :style="`${opcityBg(.1)}${borderThemeColor(.3)}`">{{ label }}</div>
            <div class="coupon-value">{{ value }}</div>
        </div>
    </div>
</template>

<script>
import ModeMixin from '@common/mixin';
export default {
    name: 'ActivityCouponItem',
    mixins: [ModeMixin],
    props: {
        label: {
            type: String,
            default: '',
        },
        value: {
            type: String,
            default: '',
        },
    },
};
</script>

<style lang="less">
.activity-coupon-item {
    display: inline-block;
    border-width: 0.5px;
    border-style: solid;
    font-size: @font-size-sm;
    border-radius: 2px;
    height: 20px;
    line-height: 20px;
    font-weight: 400;
    .m-r(@gap);
    .coupon-item-content {
        .flex();
        height: 100%;
    }
    .coupon-label {
        height: 100%;
        .flex-row-center();
        .p-h(@gap-sm);
        border-right: 0.5px solid transparent;
    }
    .coupon-value {
        .p-h(@gap-sm);
    }
}
</style>
